<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON数据请求</title>
    <script type="text/javascript">
        let colleges = [];

        function init() {
            let object = new XMLHttpRequest();
            object.open("get", "./../asset/data.json", true);
            object.send();
            object.onreadystatechange = function () {
                if (object.readyState === 4 && object.status === 200) {
                    let data = object.responseText;
                    colleges = JSON.parse(data);
                    let university_college = document.getElementById("college");
                    let university_subject = document.getElementById("subject");
                    for (let i = 0; i < colleges.length; i++) {
                        university_college[i] = new Option(colleges[i].academy);
                    }
                    for (let i = 0; i < colleges[0].major.length; i++) {
                        university_subject[i] = new Option(colleges[0].major[i]);
                    }
                    document.getElementById("description").innerHTML = "学院：" + university_college[0].innerHTML + "，专业：" + university_subject[0].innerHTML;
                }
            }
        }
    </script>
</head>
<body onload="init()">
<label for="college">请选择学院：</label><select id="college" onclick="fun1()"></select>
<label for="subject">专业：</label><select id="subject" onclick="fun2()"></select>
<br>
<span id="description"></span>
<script type="text/javascript">
    let des;

    function fun1() {
        let university_college = document.getElementById("college");
        let university_subject = document.getElementById("subject");
        let index = university_college.selectedIndex;
        university_subject.length = 0;
        for (let i = 0; i < colleges[index].major.length; i++) {
            university_subject[i] = new Option(colleges[index].major[i]);
        }
        let des_college = "学院：" + document.getElementById("college").value;
        let des_subject = "，专业：" + document.getElementById("subject").value;
        des = des_college + des_subject;
        document.getElementById("description").innerHTML = des;
        return des_college;
    }

    function fun2() {
        let des_subject = "，专业：" + document.getElementById("subject").value;
        des = fun1() + des_subject;
        document.getElementById("description").innerHTML = des;
    }

</script>
</body>
</html>